<template>
  <div>

    <div class="maincss">
      <el-row>
        <el-card  >
          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-form ref="form" :model="form" class="form" >
              <el-row>
                <el-col :span="6">
                  <el-input
                    placeholder="仪器名称、编号"
                    v-model="form.instrumentNo">
                  </el-input>
                </el-col>
                <el-col :span="6">
                  <el-input
                    placeholder="检验项目"
                    v-model="form.projectName">
                  </el-input>
                </el-col>
              </el-row>

              <el-row>

                <el-col :span="6">
                  <el-form-item  prop="deptId" label-width="20%">
                    <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="选择科室" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.qualityStatus" placeholder="选择质控结果" >
                    <el-option
                      v-for="item in qualityStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form>

              <div >
                <el-button type="primary" @click="searchList()">查询</el-button>
                <el-button @click="reset()">重置</el-button>
                <el-button @click="addIndoor()">新增</el-button>
              </div>

          </el-card>
          <el-card class="gray-card no-border no-margin-top" shadow="never">
          <el-table
            v-loading="loading"
            :data="checkList"
            style="width: 100%;"
            @row-click='detailShow = true'
          >
            <el-table-column label="检验项目" align="center" prop="projectName" :show-overflow-tooltip="true" />
            <el-table-column label="当前质控结果" align="center" prop="qualityStatus" :show-overflow-tooltip="true" />
            <el-table-column label="仪器品牌" align="center" prop="instrumentName" >
              <template slot-scope="scope">
              <!--                <el-input v-model="scope.row.name" class="td-input"/>-->
              {{ handleFilterInstrumentName(scope.row.instrumentId) }}
            </template>
            </el-table-column>
            <el-table-column label="仪器名称" align="center" prop="manufacturer" :show-overflow-tooltip="true" >
              <template slot-scope="scope">
                <!--                <el-input v-model="scope.row.name" class="td-input"/>-->
                {{ handleFilterManufacturer(scope.row.instrumentId) }}
              </template>
            </el-table-column>
            <el-table-column label="仪器编号" align="center" prop="instrumentNo" :show-overflow-tooltip="true" />
            <el-table-column label="所属科室" align="center" prop="deptName" />
            <el-table-column label="质控品名称" align="center" prop="qualityNo" >
              <template slot-scope="scope">
                <!--                <el-input v-model="scope.row.name" class="td-input"/>-->
                {{ handleFilterQualityNo(scope.row.qualityNo) }}
              </template>
            </el-table-column>
            <el-table-column label="当前在用质控品批号" align="center" prop="batchNo" />
          </el-table>
          </el-card>
          <div class="pagination-container">
            <el-pagination v-show="total>0"
                           background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           layout="total, sizes,prev, pager, next,jumper"
                           :current-page.sync="btn.pageNum"
                           :page-size="btn.pageSize"
                           :page-sizes="[5,10,20,30,50]"
                           :total="total">
            </el-pagination>
          </div>
        </el-card>
      </el-row>
      <el-drawer
            title="新增室内质控"
            :visible.sync="addShow"
            size='65%'
            >
            <addindoor @func='showRegister'/>
      </el-drawer>
      <el-drawer
          class="no-head"
          :visible.sync="detailShow"
          size='65%'
          >
          <qualityDetail @func='showRegister'/>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import qualityDetail from './detailNew.vue'
import addindoor from './addindoor.vue'
import { listQualityControl } from '../../../api/business/qualityControl'
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listInstrument } from '../../../api/business/instrument'
import { listMaterial } from '../../../api/business/material'

export default {
  name: "maintenanceInfo",
  components:{
    qualityDetail,
    addindoor,
    Treeselect
  },
  data() {
    return {
      btn:{
            indoor:true,
            add:true,
            reg:false,
            down:false,
            export:false,
            imp:false,
            ref:true,

        },
      addShow:false,
      detailShow:false,
      checkList: [],
      deptOptions:undefined,
      instrumentOptions:undefined,
      materialOptions:undefined,
      loading: false,
      redirect: undefined,
      activeName: '1',
      deviceInfo:{},
      qualityStatusOptions: [{
        value: '',
        label: '选择质控结果'
      }, {
        value: null,
        label: '全部'
      }, {
        value: '0',
        label: '在控'
      }, {
        value: '1',
        label: '警告'
      }, {
        value: '2',
        label: '失控'
      }, {
        value: '3',
        label: '未执行'
      }],
      status:[],
      inspectionRsult: [],
      value: '',
      total: 5,
      pageNum:1,
      pageSize:10,
      form: {
        deptId: null,
        instrumentNo:'',
        projectName:'',
        qualityStatus:''
      }
    };
  },
  watch: {

  },
  created() {
    this.getCheckList()
    this.getTreeSelect();
    this.queryInstrumentOptions();
    this.queryMaterialOptions();
  },
  methods: {
    showBtn(data){
      if(data=='add'){
          this.addShow = true

      }
    },
    showRegister(data){
      if(!data){
        this.addShow = false;
        this.getCheckList()
      }
    },
    getCheckList(){
      let listIndoorForm={
        deptId: this.form.deptId,
        instrumentNo:this.form.instrumentNo,
        projectName:this.form.projectName,
        qualityStatus:this.form.qualityStatus,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.loading = true;
      listQualityControl(listIndoorForm).then(response => {
        this.loading = false;
          this.queryListByParams(response)
      });
    },
    toDeviceInfo(id){
      // this.$router.push({path:"/device/deviceInfo/index"});
    },
    queryListByParams(data){
      this.checkList=data.rows;
      this.total=data.total;
    },
    getTreeSelect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    searchList(){
      this.getCheckList()
    },
    reset(){
      let form={
          deptId: null,
          instrumentNo:'',
          projectName:'',
          qualityStatus:''
      }
      this.form =form
    },
    queryInstrumentOptions(){
      listInstrument().then(response=>{
        this.instrumentOptions=response.rows
      })
    },
    queryMaterialOptions(){
      listMaterial().then(response=>{
        this.materialOptions=response.rows
      })
    },
    handleFilterInstrumentName(id){
      if (id) {
        return this.instrumentOptions.filter(x => x.id == id)[0].instrumentName;
      }
    },
    handleFilterManufacturer(id){
      if (id) {
        return this.instrumentOptions.filter(x => x.id == id)[0].manufacturer;
      }
    },
    handleFilterQualityNo(id){
      if (id) {
        return this.materialOptions.filter(x => x.materialNo == id)[0].materialName;
      }
    },
    addIndoor(){
      this.addShow=true
    },
    handleCurrentChange(val){
      this.pageNum = val;
      this.getCheckList();
    },
    handleSizeChange(val){
      this.pageNum = 1;
      this.pageSize = val;
      this.getCheckList();
    }
  }
};
</script>
